<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<title>Document</title>
</head>
<style>
	#app {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 90%;
		height: 300px;
		margin: auto;
	}
</style>

<body>
	<div id="app">
		<p>
			<span>上班时间：</span>
			<el-time-picker v-model="val" placeholder="任意时间点">
			</el-time-picker>
		</p>
		<p>下班时间: <span style="margin-left:10px "> {{gettime}}</span></p>
		<p>距离下班还有：{{date|getRtime(val)}}</p>
	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			val: new Date(2019, 11, 15, 8, 30),
			date: new Date(),
			timer: null
		},
		computed: {
			gettime() {
				let tt = this.val.getTime() + 34200000;
				let t = new Date(tt)
				let h = t.getHours()
				let m = t.getMinutes()
				let s = t.getSeconds()
				return `${this.getnum(h)}:${this.getnum(m)}:${this.getnum(s)}`
			},
			getmytime() {
				let tt = this.val.getTime() + 34200000;
				return new Date(tt)
			}
		},
		mounted() {
			this.set()
		},
		beforeDestroy() {
			this.clear()
		},
		methods: {
			getnum(n) {
				return n >= 10 ? n : '0' + n
			},
			set() {
				this.timer = setInterval(() => {
					this.date = new Date();
				}, 1000)
			},
			clear() {
				clearInterval(this.timer)
			}
		},
		filters: {
			getRtime(a, b) {
				let c = b.getTime() + 34200000;
				let EndTime = new Date(c);
				let NowTime = a;
				let t = EndTime.getTime() - NowTime.getTime();
				let d = Math.floor(t / 1000 / 60 / 60 / 24);
				let h = Math.floor((t / 1000 / 60 / 60) % 24);
				let m = Math.floor((t / 1000 / 60) % 60);
				let s = Math.floor((t / 1000) % 60);
				return `${h}小时${m}分钟${s}秒`;
			}
		}
	})
</script>

</html>